<template>
  <view>
    <el-table
      :data="pageData.listData"
      :header-cell-style="{ background: '#F5F5F5', 'text-align': 'center' }"
      :cell-style="{ 'text-align': 'center' }"
    >
      <XMTableColumn prop="createTime" label="时间"></XMTableColumn>
      <XMTableColumn prop="remake" label="备注(仅本人可见)"></XMTableColumn>
      <XMTableColumn prop="reply" label="回复患者"></XMTableColumn>
      <XMTableColumn label="操作">
        <template #default="scope">
          <el-button
            :disabled="!scope.row.leftUrl"
            v-if="type === 'BS'"
            size="small"
            type="text"
            @click="player(scope.row, 'left')"
          >
            播放左肺
          </el-button>
          <el-button
            :disabled="!scope.row.rightUrl"
            v-if="type === 'BS'"
            size="small"
            type="text"
            @click="player(scope.row, 'right')"
          >
            播放右肺
          </el-button>
          <el-button
            :disabled="!scope.row.videoUrl && !scope.row.url"
            size="small"
            type="text"
            @click="player(scope.row, 'video')"
          >
            播放视频
          </el-button>
          <el-button size="small" type="text" @click="rely(scope.row)">
            回复患者
          </el-button>
          <el-button size="small" type="text" @click="remake(scope.row)">
            备注
          </el-button>
          <el-button size="small" type="text" @click="showQR(scope.row)">
            查看二维码
          </el-button>
        </template>
      </XMTableColumn>
    </el-table>
    <xm-pagination
      :total="pageData.total"
      @pagination="paginaChange"
    ></xm-pagination>
    <el-dialog
      width="30%"
      :title="dialogTitle"
      v-model="isVisble"
      @closed="diaglogCloed"
    >
      <el-input
        v-if="inputType"
        type="textarea"
        rows="6"
        maxlength="50"
        show-word-limit
        v-model="msg"
      ></el-input>
      <x-m-player v-else ref="refPalyer" :url="row.XMURL"></x-m-player>
      <template #footer v-if="inputType">
        <span class="dialog-footer">
          <el-button @click="isVisble = false">取 消</el-button>
          <el-button type="primary" @click="onSubmit">确 定</el-button>
        </span>
      </template>
    </el-dialog>
  </view>
</template>
<script>
  import { useRoute } from 'vue-router'
  import { ref, reactive, onMounted } from 'vue'
  import {
    getVideoUploadList,
    relyVideoMsg,
    getBSList,
    relyBSMsg,
  } from '@/api/modules/patient'
  import { ElMessage, ElLoading } from 'element-plus'
  import XMPlayer from '@/components/XMPlayer'
  import { useStore } from 'vuex'
  export default {
    name: 'videoUploadlist',
    props: { type: String },
    components: { XMPlayer },
    setup(props) {
      const route = useRoute()
      const isVisble = ref(false)
      const dialogRef = ref(null)
      const inputType = ref(null)
      const msg = ref('')
      const row = ref({})
      const dialogTitle = ref('请输入')
      const refPalyer = ref(null)
      const diaglogCloed = function () {
        msg.value = ''
        if (refPalyer.value) refPalyer.value.pause()
      }
      const loadVideoUploadList = async function (params) {
        const res = await getVideoUploadList(params)
        pageData.listData = res.data
        pageData.total = res.total
        console.log('res =' + JSON.stringify(res))
      }
      const loadBSList = async function (params) {
        const res = await getBSList(params)
        pageData.listData = res.data
        pageData.total = res.total
      }
      const pageData = reactive({
        listData: [],
        total: null,
        search: { patientId: route.query.id, pageIndex: 1, pageSize: 5 },
        form: { submitTime: '', pef1: null, pef2: null, pef3: null },
        chartData: null,
      })
      onMounted(() => {
        loadData(pageData.search)
      })
      const loadData = function (params) {
        if (props.type === 'video') {
          loadVideoUploadList(params)
        } else {
          loadBSList(params)
        }
      }

      const paginaChange = function (params) {
        pageData.search.pageIndex = params.current
        pageData.search.pageSize = params.pageSize
        pageData.search.orderType = params.orderType
        loadData(pageData.search)
      }

      const player = function (listItem, type) {
        dialogTitle.value = '播放'
        isVisble.value = true
        inputType.value = null
        const url =
          type === 'video'
            ? listItem.videoUrl
              ? listItem.videoUrl
              : listItem.url
            : type === 'left'
            ? listItem.leftUrl
            : listItem.rightUrl
        listItem.XMURL = url
        row.value = listItem
      }
      const rely = function (listItem) {
        isVisble.value = true
        dialogTitle.value = '请输入回复患者数据'
        inputType.value = 'reply'
        row.value = listItem
      }
      const remake = function (listItem) {
        isVisble.value = true
        dialogTitle.value = '请输入备注'
        inputType.value = 'remake'
        row.value = listItem
      }
      const onSubmit = async function () {
        if (!msg.value) {
          ElMessage.warning('请输入内容')
          return
        }
        const config = {
          id: row.value.id,
          patientId: pageData.search.patientId,
        }
        config[inputType.value] = msg.value
        const loading = ElLoading.service()
        const res = await relyMsg(config).catch(() => {
          loading.close()
        })
        if (!res) return
        isVisble.value = false
        loading.close()
        ElMessage.success(res.message)
        loadData(pageData.search)
      }
      const relyMsg = function (config) {
        if (props.type === 'video') {
          return relyVideoMsg(config)
        } else {
          return relyBSMsg(config)
        }
      }
      const store = useStore()
      function showQR(row) {
        console.log('row =' + JSON.stringify(row))
        const { leftUrl, rightUrl, videoUrl, url } = row
        const data = []
        if (props.type === 'video') {
          if (url) data.push({ name: '视频', text: [url] })
          store.dispatch('qrcode/setQRCodeShowData', {
            config: { showTextbar: true },
            data,
          })
        } else {
          if (leftUrl) data.push({ name: '左肺', text: [leftUrl] })
          if (rightUrl) data.push({ name: '右肺', text: [rightUrl] })
          if (videoUrl) data.push({ name: '视频', text: [videoUrl] })
          store.dispatch('qrcode/setQRCodeShowData', {
            config: { showTextbar: true },
            data,
          })
        }
      }
      return {
        isVisble,
        dialogRef,
        paginaChange,
        pageData,
        player,
        rely,
        remake,
        msg,
        onSubmit,
        dialogTitle,
        row,
        inputType,
        diaglogCloed,
        refPalyer,
        showQR,
      }
    },
  }
</script>
<style lang="scss" scoped></style>
